<template>
    <div>
        <div class="ordering" id="ordering">
            <!-- 一级菜单 -->
            <van-badge-group :active-key="getKey == -1 ? 0 : getKey" @change="onChange" class="goods">
                <div>
                    <van-badge :title="item.text" v-for="item in orderList" :key="item.id" />
                </div>
            </van-badge-group>
            <!-- 二级菜单 -->
            <div class="foods-wrapper">
                <div ref="foodsUl">
                <div v-for="item in orderList" :key="item.id" class="li">
                    <van-cell :title="item.text" icon="fire" />
                    <van-card
                        :price="it.price"
                        :desc="it.des"  
                        :title="it.text"
                        :thumb="it.img" v-for="it in item.children" :key="it.id">
                        <div slot="tags" class="tags">
                            <span v-for="(i, index) in it.tags" :key="index">{{i}}</span>
                        </div>
                        <div slot="footer">
                            <van-stepper
                                :value="stepperValue"
                                integer
                                disable-input
                                :min="0"
                                :max="20"
                                :step="1"
                                @plus="onPlus(it, it.id - 1)"
                                @minus="onMinus(it, it.id - 1)"
                                ref="stepper"
                            />
                        </div>
                    </van-card>
                </div>
                </div>
            </div>
        </div>
        <!-- settle -->
        <settle :price="orderList"></settle>
    </div>
</template>

<script>
// better-scroll
import BScroll from 'better-scroll'
import settle from './settle'
export default {
    props: ['orderList'],
    data() {
        return {
            scrollY: 0,     // 二级菜单y轴滑动坐标
            tops: [],       // 右侧商品top数据
            foodsNum: 0,
        };
    },
    methods: {
        onChange(key) {
            const scrollY = this.tops[key]
            this.scrollY = scrollY
            this.foodsScroll.scrollTo(0, -scrollY, 300)
        },
        // 初始化滚动条
        _initScroll() {
            const h = window.innerHeight - 46 -100 - 44 -50 + 'px'
            document.getElementById('ordering').style.height = h
            // 二级菜单滚动条
            this.foodsScroll = new BScroll('.foods-wrapper',{
                probeType: 3,
                click: true
            })
            // 监听
            this.foodsScroll.on('scroll', ({x, y}) => {
                this.scrollY = -y
            })
            // 一级菜单滚动条
            const goodsScroll = new BScroll('.goods',{
                probeType: 3,
                click: true
            })
        },
        // 初始化tops
        _initTops() {
            const tops = []
            let top = 0
            tops.push(top)
            const lis = this.$refs.foodsUl.getElementsByClassName('li')
            Array.prototype.slice.call(lis).forEach(li => {
                top += li.clientHeight
                tops.push(top)
            })
            this.tops = tops
        },
        // 加入购物车
        onPlus(info, index, indexF) {
            // 让计步器显示全貌
            for (var i = 0; i < this.$refs.stepper[index].$el.childNodes.length; i++) {
                this.$refs.stepper[index].$el.childNodes[i].style.display = 'inline-block'
            }
            this.$store.state.buyList.push(info)
            this.$store.state.countPrice = (this.$store.state.countPrice + info.price).toFixed(2) * 1
            // 购物车动画
            document.getElementById('shopcar').style.animation = "shopcar 0.5s";
            setTimeout(() => {
                document.getElementById('shopcar').style.animation = "";
            }, 500)
        },
        // 在购物车删除商品
        onMinus(info, index) {
            // 隐藏部分计步器
            if (this.$refs.stepper[index].currentValue === 0) {
                this.$refs.stepper[index].$el.childNodes[0].style.display = 'none'
                this.$refs.stepper[index].$el.childNodes[1].style.display = 'none'
            }

            this.$store.state.buyList.some((item, index) => {
                if (item == info) {
                    this.$store.state.buyList.splice(index, 1)
                    return true
                }
            })
            this.$store.state.countPrice = Math.abs(this.$store.state.countPrice - info.price)
        }
    },
    mounted() {
        setTimeout(() => {
            this._initScroll()
            this._initTops()
        },1000)
    },
    computed: {
        getKey() {
            const {scrollY, tops} = this
            const index = tops.findIndex((top, index) => {
                return scrollY >= top && scrollY < tops[index + 1]
            })
            return index
        },
        stepperValue() {
            return 0
        }
    },
    components: {
        settle
    }
}
</script>

<style lang="less">
    .ordering {
        display: flex;
        // 一级菜单
        .goods {
            width: 90px;
        }
        .van-cell {
            font-weight: 700;
            font-size: 16px;
            color: #666;
        }
        // 二级菜单
        .foods-wrapper {
            flex: 1;
            overflow: hidden;
            .van-card  {
                margin-top: 0;
                .van-card__title {
                    font-size: 15px;
                    font-weight: 700;
                    overflow : hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                }
                .van-card__desc {
                    margin-bottom: 1vh;
                }
                .van-card__price {
                    margin-top: 1vh;
                    font-size: 18px;
                }
                .tags {
                    span {
                        margin-right: 5px;
                    }
                }
                // 计步器
                .van-stepper__plus,
                .van-stepper__minus {
                    font-size: 30px;
                    background: #f44;
                    border: 1px solid #f44;
                    color: #fff;
                    border-radius: 50%;
                    &::before,
                    &::after {
                        background: #fff;
                    }
                }
                .van-stepper__minus {
                    display: none;
                    background: #fff;
                    &::before {
                        background: #f44;
                    }
                }
                .van-stepper__input {
                    display: none;
                    background: #fff;
                    color: #000;
                }
                .show {
                    display: inline-block;
                }
            }
        }
    }
</style>

<style>
    /* animated */
    @keyframes shopcar {
        50% {
            transform: scale(.8)
        }
        75% {
            transform: scale(1.2)
        }
        100% {
            transform: scale(1)
        }
    }
</style>
